<template>
<el-container>
  <el-header>
    <el-row>
      <el-col>
        <el-button type="primary" size="small" @click="toBack">返回</el-button>
      </el-col>
    </el-row>
  </el-header>
  <el-main>
    <div id="myChart" ref="myChart"></div>
  </el-main>
</el-container>
</template>

<script>
  import echarts from '@/utils/echarts'

  export default {
    name: 'Usage',
    data() {
      return {}
    },
    methods: {
      toBack() {
        this.$router.back(-1);
      },
      draw () {
        // 实例化echarts对象
        let myChart = echarts.init(this.$refs.myChart)

        // 绘制条形图
        myChart.setOption({
          title: {
            text: 'Echarts',
            top: 5,
            left: 'center'
          },
          legend: {
            data: ['衣服', '帽子', '裤子', '鞋子'],
            top: 30
          },
          // X轴
          xAxis: {
            data: [
              '一月', '二月', '三月', '四月'
            ]
          },
          // Y轴
          yAxis: {},
          // 数据
          series: [
            {
              name: '衣服',
              type: 'bar',
              data: [120, 100, 440, 320]
            },
            {
              name: '帽子',
              type: 'bar',
              data: [200, 120, 240, 330]
            },
            {
              name: 'bar',
              type: 'line',
              data: [120, 200, 240, 260, 300]
            },
            {
              name: 'bar',
              type: 'line',
              data: [120, 200, 300, 140, 260]
            }
          ]
        })
      },
      init() {
        const self = this
        setTimeout(() => {
          window.onresize = function() {
            self.chart = echarts.init(self.$refs.myChart);
            self.chart.resize();
          }
        },20)
      }
    },
    mounted() {
      this.draw()
      this.init()
    }
  }
</script>

<style scoped lang="scss">
  .el-container {
    .el-header {
      margin-top: 5vh;
    }

    .el-main {
      #myChart {
        width: 95%;
        height: 300px;
        margin: 20px auto;
      }
    }
  }
</style>
